<template>
  <view v-if="show" class="popup">
    <view class="popup-content">
      <div class="popup-title">
        <span>商品资料查询</span>
        <div
          @click="clickCancel('show')"
          class="iconfont icon-guanbi font-size-22 color-2 font-weight-400"
        ></div>
      </div>
      <div class="content">
        <div class="search-box">
          <WSearchInput
            v-model="searchValue"
            class="bg-color"
            :active="true"
            saomaType="searchGoodsPopup"
            placeholder="请输入商品编码/商品条码/PLU码/商品首字母拼音"
            :clearable="true"
          >
            <template #input-bt>
              <!-- <div @click="getList(true)" class="m-l-14 search-bt">查询</div> -->
            </template>
          </WSearchInput>
        </div>

        <scroll-view
          @scrolltolower="getList()"
          scroll-y
          class="flex-1 h-0 p-y-10"
        >
          <template v-if="!goodsList.length">
            <div class="h-100 flex flex-col items-center justify-center">
              <w-image
                v-if="searchValue"
                mode="widthFix"
                width="120rpx"
                :src="emty_img"
              />

              <div class="font-size-14 color-3">
                <span v-if="searchValue">暂无商品</span>
                <span v-else
                  >请在上方输入
                  <span class="color-1">商品编码 / 商品条码 / PLU码 / 商品首字母拼音</span>
                  查询商品</span
                >
              </div>
            </div>
          </template>

          <div v-else class="flex flex-wrap gap-10 p-x-30">
            <div
              v-for="(item, i) in goodsList"
              @click="clickItem(item)"
              :key="i"
              class="goods-item"
            >
              <w-image
                :src="item.image"
                mode="aspectFill"
                width="70rpx"
                height="70rpx"
                radius="4rpx"
              />
              <div class="goods-content m-l-8 flex-1 w-0">
                <div class="color-1 lh-23 w-line-2" style="height: 46rpx">
                  {{ item.productName }}
                </div>
                <div class="font-size-14 m-t-3 w-line-1">
                  商品条码：{{ utils.barCodeNoe(item.barCode) }}
                </div>
              </div>
            </div>
          </div>
        </scroll-view>

        <WKeyboard
          class="p-x-9 flex flex-col justify-center p-y-20"
          style="background-color: #e2e5ea"
          ref="WKeyboardRef"
          width="64"
          height="54"
          gap="9rpx"
          numWidth="90"
          numHeight="50"
          numGap="15rpx"
          v-model="searchValue"
        />
      </div>
    </view>
  </view>

  <div v-if="showDetail" class="popup goods_detail_popup">
    <div class="popup-content">
      <div class="popup-title">
        <span>商品资料查询</span>
        <div
          @click="clickCancel('showDetail')"
          class="iconfont icon-guanbi font-size-22 color-2 font-weight-400"
        ></div>
      </div>
      <div class="content p-x-27">
        <div class="goods ">
          <w-image
            mode="aspectFill"
            width="108rpx"
            height="108rpx"
            class="m-l-33"
            radius="8rpx"
            :src="productData.image"
          />
          <div class="goods-data">
            <div class="color-1 font-size-18 m-b-10 p-t-6">
              {{ productData.name }}
            </div>
            <div>
              <goods-class :product="productData" />
            </div>
            <div class="flex font-size-16 m-t-10">
              <div>库存单位：{{ $utils.initSku(productData).unitName }}</div>
              <div class="m-l-50">库存数量：{{ '字段无' }}</div>
            </div>
          </div>
        </div>

        <up-table class="m-t-20">
          <up-tr class="up-tr">
            <up-th v-for="(item, i) in columns" :key="i" class="up-th">
              <div
                class="font-size-16 color-1 font-weight-500 flex items-center justify-center"
              >
                {{ item.title }}
              </div>
            </up-th>
          </up-tr>
          <up-tr v-for="(item, i) in productData.skus" :key="i" class="up-tr">
            <up-td v-for="(item1, i1) in columns" :key="i1" class="up-td">
              <!-- 处理价格 -->
              <div v-if="item1.key == 'retailPrice'">
                {{ item[item1.key] }} 元
              </div>
              <div v-else>
                {{ item[item1.key] }}
              </div>
            </up-td>
          </up-tr>
        </up-table>
      </div>
    </div>
  </div>
</template>
<script setup>
import utils from "../../utils";
import allApi from "@/api/index";
import emty_img from "@/static/images/search-goods-emty.png";
import { ref, nextTick, watch } from "vue";
import { useCommonStore } from "../../store/common";
import $utils from '@/utils/index.js';

const show = ref(false);
const searchValue = ref("");
const WKeyboardRef = ref();
const goodsList = ref([]);
const queryParams = ref({
  page: 1,
  pageSize: 10,
  total: 0,
  combination: "",
});
const columns = [
  {
    title: "销售单位",
    key: "unitName",
    width: 200,
  },
  {
    title: "包装",
    key: "packSize",
    width: 200,
  },
  {
    title: "零售价(元)",
    key: "retailPrice",
    width: 200,
  },
];

watch(searchValue, async (newValue) => {
  utils.throttle(async () => {
    if (newValue) {
      getList(true);
    } else {
      goodsList.value = [];
    }
  });
});

const showDetail = ref(false);
const checkItem = ref({});
const productData = ref({});
function clickItem(item) {
  showDetail.value = true;
  checkItem.value = item;
  getProductSkuList();
}
async function getProductSkuList() {
  const res = await allApi.erp.product.selectPosProductById({
    productId: checkItem.value.productId,
    merchantId: useCommonStore().merchantId,
  });
  productData.value = res.data;
}

async function getList(reset = false) {
  if (reset) {
    resetQueryParams();
  }
  if (
    queryParams.value.total === goodsList.value.length &&
    goodsList.value.length
  )
    return "";
  const res = await allApi.erp.getProductSkuList({
    ...queryParams.value,
    page: queryParams.value.page,
    combination: searchValue.value,
  });
  goodsList.value.push(...res.data.list);
  queryParams.value.total = res.data.total;
  queryParams.value.page += 1;
}

function resetQueryParams() {
  queryParams.value = {
    page: 1,
    pageSize: 10,
    total: 0,
    combination: "",
  };
  goodsList.value = [];
}

function clickCancel(type) {
  if (type == "showDetail") {
    showDetail.value = false;
  } else {
    show.value = false;
    searchValue.value = "";
    useCommonStore().backToSaomaType();
  }
}
function open(b = true) {
  useCommonStore().setSaomaType("searchGoodsPopup");
  show.value = b;
  nextTick(() => {
    WKeyboardRef.value.switchShowJianpan(true);
  });
}

defineExpose({
  open,
});

// 扫码枪逻辑
uni.$on("sendCode", sendCode);
function sendCode(e) {
  // 不是当前输入框的扫码
  if (useCommonStore().saomaType !== "searchGoodsPopup") return;
  // uni.$u.toast(e)
  searchValue.value = e;
  this.getList(true);
}
</script>
<style lang="scss" scoped>
::v-deep {
  .u-table {
    border-left: 0!important;
  }
  .up-th,
  .up-td {
    border-right: 0 !important;
    padding-top: 12rpx !important;
    padding-bottom: 12rpx !important;
  }
}

.popup {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 99;
  background: rgba($color: #000000, $alpha: 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  .popup-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid $uni-border-color-1;
    height: 50rpx;
    padding: 0 30rpx;

    color: $uni-text-color-1;
    font-size: 18rpx;
    font-weight: 700;
  }

  .popup-content {
    overflow: hidden;

    width: 920rpx;
    height: 630rpx;
    background: $uni-bg-color;
    border-radius: 14rpx;
    display: flex;
    flex-direction: column;
    .content {
      flex: 1;
      height: 0;
      display: flex;
      flex-direction: column;
      .search-box {
        margin: 20rpx 162rpx 0;

        .search-bt {
          background: $uni-color-primary;
          color: $uni-text-color-inverse;
          width: 80rpx;
          height: 50rpx;
          line-height: 50rpx;
          text-align: center;
          border-radius: 8rpx;
        }
      }

      .goods-item {
        display: flex;
        width: 280rpx;

        border-radius: 4rpx;
        border: 1rpx solid $uni-border-color-1;
        padding: 12rpx 6rpx;
      }
    }

    // .bt {
    //   min-width: 120rpx;
    //   min-height: 50rpx;
    //   display: flex;
    //   align-items: center;
    //   justify-content: center;
    //   font-size: 18rpx;
    //   font-weight: 500;
    //   border: 1px solid $uni-border-color-1;
    //   border-radius: 8rpx;
    //   color: #606266;
    // }
    // .confirm {
    //   border: 0;
    //   background: $uni-color-error;
    //   color: $uni-text-color-inverse;
    // }
  }
}

.goods_detail_popup {
  .popup-content {
    width: 754rpx;
    height: 500rpx;

    .content {
      .goods {
        display: flex;
        padding-top: 20rpx;

        .goods-data {
          margin-left: 20rpx;
        }
      }
    }
  }
}
</style>
